<template>
	<!-- 工作管理 -->
	<view class="work-container">
		<view class="work-head">
			<view class="work-head-top">工作统计</view>
			<view class="work-head-content">
				<view class="work-head-content-item" @click="handleHeadList(index)" v-for="(item,index) in headList":key="index">
					<view class="item-top">{{ item.num }}</view>
					<view class="item-bottom">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="work-content">
			<view class="work-content-head">网格管理</view>
			<view class="work-content-con">
				<view class="work-content-con-item" @click="handleWangGe(index)" v-for="(item,index) in wangGeList" :key="index">
					<view class="item-img"><image mode="widthFix" :src="item.img"></image></view>
					<view class="item-text">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="work-content">
			<view class="work-content-head">日常管理</view>
			<view class="work-content-con">
				<view class="work-content-con-item" @click="handleRiChang(index)" v-for="(item,index) in RiChangList" :key="index">
					<view class="item-img"><image mode="widthFix" :src="item.img"></image></view>
					<view class="item-text">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="work-content2">
			<view class="work-content2-head">网格员职责</view>
			<view class="work-content2-con">
				<text class="text1">全面采集,动态掌握并及时上报网格区域内人口、房屋、社保、诉求、就业、安全,稳定等情况,突出做好民生服务,困难群众...</text>
				<text class="text2" @click="goWorkInfo">[查看]</text>
			</view>
		</view>
<!-- 		<view class="work-content3">
			<view class="work-content2-head">办理事项查询</view>
			<view class="work-content3-con">
				<view class="work-content3-con-item">
					<view class="item-left"><image mode="widthFix" src="../../static/icon/h1.png"></image></view>
					<view class="item-right">按业务查询</view>
				</view>
				<view class="work-content3-con-item">
					<view class="item-left"><image mode="widthFix" src="../../static/icon/h1.png"></image></view>
					<view class="item-right">按部门查询</view>
				</view>
			</view>
		</view> -->
		<u-popup v-model="midButton" mode="bottom" border-radius="30">
			<view class="midButton">
				<view class="midButton-head">选择您要添加的项目</view>
				<view class="midbutton-content">
					<view class="midbutton-content-item" v-for="(item,index) in midButtonList" :key="index" @click="handlemidButton(item.page)">
						<view class="item-top"><image :src="item.img"></image></view>
						<view class="item-bottom">{{ item.text }}</view>
					</view>
				</view>
				<view class="midbutton-cacel" @click="midButton=false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				midButton:false,
				midButtonList: this.midButtonList,
				headList:[
					{
						num:0,
						text:'上报事件数量'
					},
					{
						num:0,
						text:'处理事件数量'
					},
					{
						num:0,
						text:'处理事件评分'
					},
					{
						num:0,
						text:'任务总数'
					},
					{
						num:'0%',
						text:'任务完成度'
					},
					{
						num:0,
						text:'巡查部件数'
					}
				],
				wangGeList:[
					{
						img:'../../static/img/shequxuncha.png',
						text:'巡查任务'
					},
					{
						img:'../../static/img/xingfang.png',
						text:'走访任务'
					},
					{
						img:'../../static/img/daka.png',
						text:'打卡'
					}
				],
				RiChangList:[
					{
						img:'../../static/img/shijianguanli.png',
						text:'事件管理'
					},
					{
						img:'../../static/img/worklog.png',
						text:'工作日志'
					},
					{
						img:'../../static/img/shiping.png',
						text:'视频'
					}
				]
			}
		},
		onLoad() {
			uni.onTabBarMidButtonTap((e) => {
				this.midButton = true
			})
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'./AskForLeave/AskForLeave'
			})
		},
		onShow() {
			this.midButton = false
		},
		mounted() {
			
		},
		onShow() {
			this.getGridStaffWorkReport()
		},
		methods:{
			// 获取数量
			getGridStaffWorkReport() {
				this.$u.api.getGridStaffWorkReport()
					.then(res => {
						console.log(res)
						if(res.code == 200) {
							this.headList[0].num = res.result.submitEventNum
							this.headList[1].num = res.result.dealEventNum
							this.headList[2].num = res.result.dealEventScore
							this.headList[3].num = res.result.taskNum
							this.headList[4].num = res.result.taskCompletion
							this.headList[5].num = res.result.patrolFacilityNum
						}
					})
					.catch(err => {
						console.log(err)
						uni.showToast({
							title:'获取统计失败',
							icon:'none'
						})
					})
			},
			handlemidButton(url) {
				uni.navigateTo({url})
			},
			handleHeadList(index) {
				// uni.navigateTo({
				// 	url:'./WorkStatistics/WorkStatistics?index='+index
				// })
			},
			// 去职责详情
			goWorkInfo() {
				uni.navigateTo({
					url:'./gridWorkInfo/gridWorkInfo'
				})
			},
			handleWangGe(index){
				if(index == 0) {
					uni.navigateTo({
						url:'./CommunityInspection/CommunityInspection'
					})
				} else if(index == 1) {
					uni.navigateTo({
						url:'./PetitionManagement/PetitionManagement'
					})
				} else if(index == 2) {
					uni.navigateTo({
						url:'./WorkSignIn/WorkSignIn'
					})
				}
			},
			handleRiChang(index){
				if(index == 0) {
					uni.navigateTo({
						url:'../ThingsList/ThingsList'
					})
				} else if(index == 1) {
					uni.navigateTo({
						url:'../Mine/WorkLog/WorkLog'
					})
				} else if(index==2) {
					uni.navigateTo({
						url:'../Mine/sp'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-container{
		padding: 20rpx;
		background-color: #f5f6f7;
		min-height: 100vh;
		.midButton {
			width: 100%;
			min-height: 50vh;
			padding: 20rpx;

			.midbutton-cacel {
				width: 100%;
				padding: 20rpx 0;
				color: #000;
				font-size: 30rpx;
				font-weight: 600;
				text-align: center;
				border-top: 1px solid #f4f1f1;
			}

			.midButton-head {
				width: 100%;
				padding: 20rpx 0;
				color: #000;
				font-size: 30rpx;
				font-weight: 600;
				text-align: center;
			}

			.midbutton-content {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				padding: 20rpx 0;

				.midbutton-content-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					color: #333;
					font-size: 28rpx;
					width: 25%;
					margin: 10rpx 0;

					.item-top {
						width: 30px;
						height: 30px;
						margin-bottom: 10rpx;

						image {
							width: 30px;
							height: 30px;
						}
					}
				}
			}
		}
		.work-head{
			width: 100%;
			.work-head-top{
				width: 100%;
				text-align: left;
				color: #000;
				font-size: 28rpx;
				padding: 20rpx 0;
				font-weight: 600;
			}
			.work-head-content{
				color: #fff;
				background-image: linear-gradient(to right,#4b96f0,#4c93f2);
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-wrap: wrap;
				border-radius: 20rpx;
				min-height: 300rpx;
				padding: 20rpx;
				.work-head-content-item{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					
					width: 30%;
					.item-top{
						font-size: 38rpx;
						font-weight: 600;
					}
					.item-bottom{
						font-size: 28rpx;
						margin-top: 15rpx;
					}
				}
			}
		}
		.work-content{
			.work-content-head{
				width: 100%;
				text-align: left;
				color: #000;
				font-size: 28rpx;
				padding: 20rpx 0;
				font-weight: 600;
			}
			.work-content-con{
				display: flex;
				justify-content: space-around;
				align-items: center;
				.work-content-con-item{
					width: 25%;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					.item-img{
						width: 60rpx;
					}
					.item-text{
						color: #333;
						font-size: 28rpx;
						margin-top: 15rpx;
					}
				}
			}
		}
		.work-content2{
			width: 100%;
			.work-content2-head{
				width: 100%;
				text-align: left;
				color: #000;
				font-size: 28rpx;
				padding: 20rpx 0;
				font-weight: 600;
			}
			.work-content2-con{
				width: 100%;
				box-shadow: 0 8px 6px #eee, 0 0 8px #eee, 0 0 6px #eee;
				min-height: 100rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				color: #333;
				font-size: 24rpx;
				.text1{
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
				}
				.text2{
					color: #007AFF;
					font-size: 24rpx;
					text-decoration: underline;
				}
			}
		}
		.work-content3{
			.work-content2-head{
				width: 100%;
				text-align: left;
				color: #000;
				font-size: 28rpx;
				padding: 20rpx 0;
				font-weight: 600;
			}
			.work-content3-con{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.work-content3-con-item:nth-child(1){
					background-image: linear-gradient(to right,#5ea9f7,#3c83f7);
				}
				.work-content3-con-item:nth-child(2){
					background-image: linear-gradient(to right,#e6a141,#eb8b3d);
				}
				.work-content3-con-item{
					color: #fff;
					font-size: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
					width: 48%;
					height: 120rpx;
					font-weight: 600;
					.item-left{
						width: 40rpx;
					}
					.item-right{
						margin-left: 15rpx;
					}
				}
				
			}
		}
	}
</style>
